<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import type { VxePagerEvents } from 'vxe-table'

import { useDeleteSupplierInfo, useSupplierGetPage, useSupplierSynInfo } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { ElCard } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { useRouter } from 'vue-router'

import Add from './add.vue'

const { isPending: deletePending, mutate: deleteMutate } = useDeleteSupplierInfo()

const { isPending: synPending, mutate: synMutate } = useSupplierSynInfo()

const { push } = useRouter()

const visible = ref<boolean>(false)

const tabsList = [
    {
        label: '外部库',
        name: 0,
    },
]
const activeName = ref(0)

const state = ref({
    name: '',
})

const initialState = cloneDeep({ ...state.value })

const columns: PlusColumn[] = [
    {

        label: '公司名称',
        prop: 'name',
        valueType: 'input',
    },
]

const gridOptions = reactive({
    columns: [
        { title: '序号', type: 'seq', width: '60' },
        { field: 'name', title: '公司名称' },
        { field: 'creditCode', title: '社会信用代码' },
        { field: 'operName', title: '法定代表人' },
        { field: 'startDate', title: '成立日期' },
        { field: 'registCapi', title: '注册资本', width: '130' },
        { field: 'createTime', title: '创建时间' },
        { slots: { default: 'opreate' }, title: '操作' },
    ],
    data: [],
    rowConfig: {
        keyField: 'id',
    },
})

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const params = computed(() => {
    return {
        name: state.value.name,
        page: tablePage.value.currentPage,
        size: tablePage.value.pageSize,
        type: activeName.value,
    }
})

const { data, isLoading } = useSupplierGetPage(params)

const loading = computed(() => isLoading.value || deletePending.value || synPending.value)

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function submit(val: any) {
    tablePage.value.currentPage = 1
    state.value = {
        ...val,
    }
}

function reset() {
    state.value = initialState
    tablePage.value.currentPage = 1
}

function goShow(row: any) {
    push(`/operations-pages/operations-enterprise-management/supplier-database/${row.id}`)
}

function deleteInfo(row: any) {
    deleteMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

function synchronize(row: any) {
    synMutate(row.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

watchEffect(() => {
    if (data.value) {
        tablePage.value.total = data.value?.total ?? 0
    }
})
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    @reset="reset"
                    @submit="submit"
        />
    </ElCard>

    <ElCard shadow="never">
        <el-tabs v-model="activeName"
                 class="demo-tabs"
        >
            <el-tab-pane v-for="item in tabsList"
                         :key="item.name"
                         :label="item.label"
                         :name="item.name"
            />
        </el-tabs>

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="loading"
                     :data="data?.records"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="visible = true"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新增
                </ElButton>
            </template>

            <template #opreate="{ row }">
                <div class="text-#da0004 flex gap-15 w-full justify-center">
                    <span class="cursor-pointer"
                          @click="goShow(row)"
                    >
                        查看
                    </span>

                    <span class="cursor-pointer"
                          @click="synchronize(row)"
                    >
                        同步
                    </span>

                    <span class="cursor-pointer"
                          @click="deleteInfo(row)"
                    >
                        删除
                    </span>
                </div>
            </template>
        </SearchTable>
    </ElCard>

    <Add v-model:visible="visible" />
</template>
